<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
//导入dept.js
import { getDeptList, addDept, getDeptById, updateDept, deleteDept } from '@/api/dept'

// 表格数据
const deptList = ref([])

//新增部门对话框相关
const dialogVisible = ref(false)
const deptForm = ref({
  name: ''
})

//定义对话框标题
const dialogTitle = ref('')

// 表单验证规则
const formRules = ref({
  name: [
    { required: true, message: '请输入部门名称', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
  ]
})

// 表单引用
const formRef = ref()

// 编辑处理函数
const handleEdit = async (id) => {
  //根据id查询部门数据，回显到对话框的表单中
  const result = await getDeptById(id)
  if (result.code) {
    dialogTitle.value = '修改部门'
    // 重置表单验证
    if (formRef.value) {
      formRef.value.resetFields()
    }
    //回显数据
    deptForm.value = result.data
    //弹出对话窗口
    dialogVisible.value = true
  } else {
    //提示查询失败
    ElMessage.error(result.msg)
  }
}

// 删除处理函数
const handleDelete = (id) => {
  //弹出确认窗口，如果点击确认，则发送ajax请求，删除数据
  ElMessageBox.confirm('此操作将永久删除该部门, 是否继续?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    //点击确定，发送ajax请求，删除数据
    const result = await deleteDept(id)
    if (result.code) {
      //删除成功，重新查询数据
      ElMessage.success("删除成功!")
      search()
    } else {
      //删除失败
      ElMessage.error(result.msg)
    }
  }).catch(() => {
    //取消操作
    ElMessage.info('取消删除')
  })
}

//发起请求,查询部门数据
const search = async () => {
  const result = await getDeptList()
  // 判断请求是否成功 
  if (result.code == 1) {
    //渲染数据
    deptList.value = result.data
  } else {
    //请求失败
    ElMessage.error(result.msg)
  }
}

// 打开新增部门对话框
const openAddDialog = () => {
  dialogTitle.value = '新增部门'
  dialogVisible.value = true
  // 重置表单数据
  deptForm.value = {
    name: ''
  }
  // 重置表单验证
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

// 保存部门
const saveDepartment = async () => {
  // 表单验证
  await formRef.value.validate()
  //校验通过，发起请求
  //根据id判断，如果id存在，执行修改操作，否则执行新增操作
  let result
  if (deptForm.value.id) {
    //修改
    result = await updateDept(deptForm.value)
  } else {
    //新增
    result = await addDept(deptForm.value)
  }
  //判断请求是否成功code
  if (result.code == 1) {
    //成功
    //关闭对话框
    dialogVisible.value = false
    //提示保存成功
    ElMessage.success("保存成功")
    //重新查询列表数据
    search()
  } else {
    //失败
    ElMessage.error(result.msg)
  }
}

// 取消新增
const cancelAdd = () => {
  dialogVisible.value = false
  //提示
  ElMessage.info("取消保存")
}

//提供钩子函数
onMounted(() => {
  //查询部门数据
  search();
})
</script>

<template>
  <h3>部门管理</h3>

  <br>
  <!-- 提供按钮 "+ 新增部门" -->
  <el-button type="primary" @click="openAddDialog">+ 新增部门</el-button>

  <br>
  <br>
  <!-- 表格 -->
  <el-table :data="deptList" border style="width: 100%" :header-cell-style="{ background: '#f5f7fa', color: '#333' }">
    <!-- 序号列 -->
    <el-table-column label="序号" type="index" width="80" align="center">
      <template #default="scope">
        {{ scope.$index + 1 }}
      </template>
    </el-table-column>

    <!-- 部门名称 -->
    <el-table-column label="部门名称" prop="name" align="center" />

    <!-- 最后修改时间 -->
    <el-table-column label="最后修改时间" prop="updateTime" align="center" />

    <!-- 操作列 -->
    <el-table-column label="操作" width="150" align="center">
      <template #default="scope">
        <el-button size="small" type="primary" @click="handleEdit(scope.row.id)">
          编辑
        </el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 新增部门对话框 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px" center>
    <el-form ref="formRef" :model="deptForm" :rules="formRules" label-width="100px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="deptForm.name" placeholder="请输入部门名称，长度为2-10位" maxlength="10" show-word-limit />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelAdd">取消</el-button>
        <el-button type="primary" @click="saveDepartment">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped></style>